<template>
  <a-modal
    title="选择地址"
    :zIndex="zIndex"
    v-model="value"
    :width="800"
    :footer="null"
    :closable="false"
    @cancel="onCancel"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="20">
          <a-col :md="8" :sm="24">
            <a-form-item label="坐标值">
              <div style="overflow: hidden">{{ latlngCurrent || inputDefault }}</div>
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <a-form-item label="城市">
              <a-input placeholder="请输入城市名称" v-model="inputVal" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="onOk">确定</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="mapWrap">
      <div class="qqmap" id="qqmapCont"></div>
      <div class="lngTips"></div>
    </div>
    <!-- <a-row justify="end" type="flex" style="margin-top: 15px;">
      <a-space>
        <a-button @click="onCancel">
          取消
        </a-button>
        <a-button type="primary" @click="onOk">
          确认
        </a-button>
      </a-space>
    </a-row> -->
  </a-modal>
</template>

<script>
const statusLoading = {
  loading: true
}
export default {
  name: 'GoodsList',
  components: {},
  data() {
    return {
      catList: [],
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      status: statusLoading,
      checkId: [], // 选择中ID
      qqmap: '',
      premarker: '',
      marker: '',
      inputVal: '',
      latlngCurrent: ''
    }
  },
  props: {
    zIndex: {
      type: Number,
      default: 1000
    },
    value: {
      type: Boolean,
      default: true
    },
    mapcenter: {
      type: String,
      default: '34.759666,113.648071'
    },
    oldmarker: {
      type: String,
      default: '34.759666,113.648071'
    },
    inputDefault: {
      type: String,
      default: '34.759666,113.648071'
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      var that = this
      this.loadQQmap()
      window.onMapFileLoad = function() {
        console.log('qqmap加载完成')
        that.createMap()
      }
    })
  },
  watch: {},
  methods: {
    search() {
      var that = this
      // 调用地址解析类
      var geocoder = new window.qq.maps.Geocoder({
        complete: function(result) {
          that.qqmap.setCenter(result.detail.location)
          that.qqmap.setZoom(12)
        }
      })
      var address = this.inputVal
      // 通过getLocation();方法获取位置信息值
      console.log('搜索地址：', address)
      geocoder.getLocation(address)
    },
    inputChange() {
      this.$emit('addr', this.inputVal) // 地图点击坐标 传递给父组件
    },
    loadQQmap() {
      var script = document.createElement('script')
      // 设置标签的type属性
      script.type = 'text/javascript'
      // 设置标签的链接地址
      script.src = 'https://map.qq.com/api/js?v=2.exp&callback=onMapFileLoad&key=OV7BZ-ZT3HP-6W3DE-LKHM3-RSYRV-ULFZV'
      // 添加标签到dom
      document.body.appendChild(script)
    },
    createMap() {
      const that = this
      this.$nextTick(() => {
        console.log(window)
        console.log(document.getElementById('qqmapCont'))
        this.qqmap = new window.qq.maps.Map(document.getElementById('qqmapCont'), {
          center: new window.qq.maps.LatLng(that.mapcenter.split(',')[0], that.mapcenter.split(',')[1]),
          zoom: 12
        })
      })
      setTimeout(() => {
        this.createMarker()
        this.bindMapEvent()
      }, 500)
    },
    createMarker() {
      const that = this
      if (that.premarker) {
        that.premarker.setMap(null)
      }
      if (this.oldmarker) {
        console.log('编辑模式：', this.oldmarker)
        that.qqmap.setCenter(new window.qq.maps.LatLng(that.oldmarker.split(',')[0], that.oldmarker.split(',')[1]))
        that.premarker = new window.qq.maps.Marker({
          position: new window.qq.maps.LatLng(that.oldmarker.split(',')[0], that.oldmarker.split(',')[1]),
          map: that.qqmap
        })
      } else {
        // 获取城市列表接口设置中心点
        const citylocation = new window.qq.maps.CityService({
          complete: function(result) {
            that.qqmap.setCenter(result.detail.latLng)
          }
        })
        // 调用searchLocalCity();方法
        citylocation.searchLocalCity()
      }
    },
    bindMapEvent() {
      const that = this
      // 地图点击事件
      window.qq.maps.event.addListener(that.qqmap, 'click', function(event) {
        that.marker && that.marker.setMap(null)
        that.premarker && that.premarker.setMap(null)
        that.latlngCurrent = event.latLng.lat.toFixed(6) + ',' + event.latLng.lng.toFixed(6)
        that.marker = new window.qq.maps.Marker({
          position: event.latLng,
          map: that.qqmap
        })
      })
      // 地图鼠标滑动事件
      const $lngTipsBox = document.querySelector('.lngTips')
      // const mapBoxWidth = window.getComputedStyle(document.querySelector('.mapWrap')).width
      window.qq.maps.event.addListener(that.qqmap, 'mousemove', function(event) {
        $lngTipsBox.style.display = 'block'
        $lngTipsBox.style.top = event.pixel.y + 10 + 'px'
        $lngTipsBox.style.left = event.pixel.x + 15 + 'px'
        $lngTipsBox.innerText = '点击选择此坐标：' + event.latLng.lat + ',' + event.latLng.lng
      })
      // 鼠标离开
      window.qq.maps.event.addListener(that.qqmap, 'mouseout', function(event) {
        $lngTipsBox.style.display = 'none'
      })
    },
    onCancel() {
      this.$emit('update:value', false)
    },
    onOk() {
      this.$emit('onOk', this.latlngCurrent)
      this.$emit('update:value', false)
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.title-but {
  margin-left: 6px;
}
.qqmap {
  width: 100%;
  height: 600px;
}
.mapWrap {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin-top: 15px;
}
.lngTips {
  display: none;
  width: 255px;
  height: 60px;
  padding: 5px 7px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 123456;
  background: #ffffff;
  border-radius: 5px;
  line-height: 20px;
  box-shadow: #eeeeee 1px 1px 3px;
  border: #eeeeee 1px solid;
  font-size: 12px;
}
</style>
